<template>
  <div class="table-cell aa">
      <div id="c1">

      </div>
        <div class="center-form">
            <router-link to="/home" class="cf-logo pc-vertical"><img :src="logo" ></router-link>
            <!-- <router-link to="/busregister" v-if="$route.path != '/busregister'" class="change-version">商家版</router-link> -->
            <router-link to="/userregister"  class="change-version">个人版</router-link>

            <p class="title">注册</p>
            <div class="form-box">
                <p class="desc">请输入您的手机号与验证码</p>
            </div>
            <el-form ref="form" :rules="rules" class="form-box" :model="form" label-width="80px">
                <div style="position:relative;">
					<div style="position:absolute;top:38%;left:3%;z-index:2">
						<img :src="phoneAreaData[0].img_url" alt="">
					</div>
                    <el-form-item prop="phone">
                        <el-input placeholder="请输入手机号" v-model.trim="form.phone" class="input-with-select">
                        <!-- new select -->
						 <template slot="prepend">
							 <!-- <img :src="phoneAreaData[0].img_url" alt=""> -->
							 <el-select class="text_center text_center1"  slot="prepend" v-model="phoneArea" placeholder="请选择">
							     <el-option
							     v-for="item in phoneAreaData"
							     :key="item.lower_CN_name"
							     :label="item.area_code"
							     :value="item.lower_CN_name + item.area_code"
							     :disabled="item.lower_CN_name !== '中国'"
							     >
							     <img :src="item.img_url"  alt="">
							     <span style="padding-left:10px;">{{item.lower_CN_name}}{{item.area_code}}</span>
							     </el-option>
							 </el-select>
						 </template>
                        </el-input>
                    </el-form-item>
                </div>
                <el-form-item class="yzm" prop="yzm">
                <el-input placeholder="请输入验证码" v-model.trim="form.yzm" class="input-with-select"></el-input>
                <div class="box">
                    <a v-if="isYZMShow" href="javascript:;" class="btn-get-code" @click="getYZM">获取短信验证码</a>
                    <div v-else class="timer">
                        {{ time }} s
                    </div>
                </div>
                </el-form-item>
                <el-form-item prop="email">
                    <el-input placeholder="请输入邮箱" v-model.trim="form.email" class="input-with-select">
                        <template slot="prepend">请输入邮箱</template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="pass">
                    <el-input placeholder="请输入密码" type="password" v-model.trim="form.pass" class="input-with-select">
                        <template slot="prepend">请输入密码</template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <div class="xy">
                        <el-checkbox v-model="checked" style="margin-right: 5px;"></el-checkbox>
                        <span style="cursor: pointer;">已同意并愿意接受<router-link to="/aboutus/contact?nowid=03932e89939945f1831880fc18e52ad8" target="_blank">《猪爸爸服务条款》</router-link> 和 <router-link to="/aboutus/contact?nowid=b1a2c41354c54246b1028e47baad021c" target="_blank">《猪爸爸隐私声明》</router-link></span>
                    </div>
                </el-form-item>
                <el-form-item>
                    <div class="fb-submit">
                        <button class="btn-submit" type="button" @click="submitForm('form')">下一步</button>
                    </div>
                </el-form-item>
            </el-form>
            <div class="other-choice">
                <p>或
                    <router-link to="/userLogin" v-if="$route.path != '/busregister'">去登陆</router-link>
                    <!-- <router-link to="/busLogin" v-else>商家登陆</router-link> -->
                </p>
                </div>
            <div style="padding-top: 50px;">
                <copy></copy>
            </div>
        </div>
    </div>
</template>

<script>
import logo from "@/assets/images/logo.png";
import copy from "@/components/copyRight.vue";
export default {
    components: {
        copy
    },
    data () {
        var validatephone = (rule, value, callback) => {
            if (!value) {
            return callback(new Error('手机号不能为空'));
            }
            if(!(/^1[3456789]\d{9}$/.test(value))){
            return callback(new Error('手机号格式不正确!'));
            }
            callback();
        };
        var validateyzm = (rule, value, callback) => {
            if (!value) {
            return callback(new Error('验证码不能为空'));
            }
            
            callback();
        };
        var validateemail = (rule, value, callback) => {
           
            if (!value) {
            return callback(new Error('邮箱不能为空！'));
            }
            if(!(/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value))){
            return callback(new Error('邮箱格式不正确!'));
            }
            callback();
        };
        var validatepass = (rule, value, callback) => {
            
            if (!value) {
            return callback(new Error('密码不能为空'));
            }
            
            callback();
        };
            return {
                myCaptcha:'',
                logo,
                // phoneArea:"中国+86",
                phoneAreaData:[],
                phoneArea:"中国+86",

                isYZMShow:true,
                time:60,
                parent1: '',
                parent2: '',
                form: {
                phone:"",
                yzm:"",
                email:"",
                pass:""
                },
                rules: {
                phone: [
                    { validator: validatephone, trigger: 'blur' }
                ],
                yzm: [
                    { validator: validateyzm, trigger: 'blur' }
                ],
                email: [
                    { validator: validateemail, trigger: 'blur' }
                ],
                pass: [
                    { validator: validatepass, trigger: 'blur' }
                ],
                },
                checked:true,
            }
		},
		created() {
			if(this.$route.query.parent1) this.parent1 = this.$route.query.parent1;
			if(this.$route.query.parent2) this.parent2 = this.$route.query.parent2;
		},
        mounted(){
            this.getAreaCode(); // 加载获取区号+国旗
        },
        watch:{
            phoneArea(e){
                console.log(e) // 动态监测已选的国家和区号
            }
        },
        methods: {
        // 获取全球手机号码区号和国旗
        getAreaCode(){
            let self = this;
            let url = '/area/getAreaCode';
            this.$ajax.get(url)
            .then((res)=>{
                if(res.data.code == 0){
                    console.log("国旗区号： ",res.data.data)
                    self.phoneAreaData = res.data.data
                }
            })
        },
        postYZM(){
            this.$ajax.post("/user/sendMobileCode",{
                type:0,
                mobile:this.form.phone
            },)
            .then((res)=>{
                
                if(res.data.code == 0){
                this.$message({
                    message: '验证码发送成功!',
                    type: 'success'
                });
                // window.location.href = "register-bus-step02.html";
                }else[
                this.$message.error(res.data.msg)
                ]
            })
        },
        postMes(){
            this.$ajax.post("/user/register",{
                mobile:this.form.phone,
                email :this.form.email,
                pwd:this.form.pass,
				verifyCode:this.form.yzm,
				parent1: this.parent1,
				parent2: this.parent2
            },)
            .then((res)=>{
               
                if(res.data.code == 0){
                    this.$message({
                        message: '注册成功，请登录!',
                        type: 'success'
                    });
                    this.$router.push("/userLogin")
                }else[
                    this.$message.error(res.data.msg)
                ]
            })
        },
        toStep2(){
          this.$ajax.post("/user/register",{
              mobile:this.form.phone,
              email :this.form.email,
              pwd:this.form.pass,
              verifyCode:this.form.yzm,
            },)
            .then((res)=>{
              
              if(res.data.code == 0){
                this.$message({
                  message: '注册成功,请先填写详细信息!',
                  type: 'success'
                });
                this.$router.push("/register/step2")
                // window.location.href = "register-bus-step02.html";
              }else[
                this.$message.error(res.data.msg)
              ]
            })
        },
        onSubmit() {
            console.log('submit!');
        },
        submitForm(formName) {
            if (this.checked){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if(this.$route.path  != '/busregister'){
                            this.postMes();
                        }else{
                            this.toStep2();
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }else {
                this.$message.error("请先同意猪爸爸起名相关声明和条款");
            }

        },
        getYZM(){
            if(this.form.phone == "" ){
            this.$message.error('手机号不能为空!');
            return ;
            }
            if(!(/^1[3456789]\d{9}$/.test(this.form.phone))){
            this.$message.error('手机格式不正确!');
            return ;
            }
            /*放到mounted中获取dom失败，所以放到这里*/
            this.myCaptcha = _dx.Captcha(document.getElementById('c1'), {
                appId: '064c0824fa2e57bd1251f527ea54523f', //appId，在控制台中“应用管理”或“应用配置”模块获取
                style:'popup',
                _noLogo: true,
                success:  (token)=> {
                    this.myCaptcha.hide();
                    this.postYZM(); // 向后台请求数据
                    this.isYZMShow = !this.isYZMShow;
                    let i = 60;
                    var timer = setInterval(()=>{
                        i -- ;
                        if(i == 0){
                            this.isYZMShow = !this.isYZMShow;
                            clearInterval(timer);
                            i = 60;
                        }else{
                            this.time = i;
                        }

                    },1000)
                }
            });
            this.myCaptcha.reload();
            this.myCaptcha.show();
        }
    }
}
</script>

<style scoped>
.text_center input{
	text-align: center !important;
}

.el-input-group__prepend{
    width: 70px !important
}
/deep/ .el-form-item{
    margin-bottom: 19px !important;
}
    /deep/ .el-form-item__content{
        line-height: 20px !important;
    }
    .xy a{
        color: #405cda;
    }
#c1{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    z-index: 999999;
}
</style>